<template>
	<view class="container">
		<view class="block">
			<view class="flex col j-center a-center card">
				<view class="code">XJHZ888888</view>
				<view class="name">我的邀请码</view>
				<view class="flex j-center a-center copy">
					<view>复制</view>
				</view>
			</view>
		</view>
		<view class="invite flex j-center a-center">
			<view>立即邀请</view>
		</view>
		<view class="title">邀请记录</view>
		<view class="block">
			<view class="flex a-center item">
				<view class="row">时间</view>
				<view class="row">用户</view>
				<view class="row">来源</view>
			</view>
			<view class="flex a-center item" v-for="item,i in list" :key="i">
				<view class="row">{{item.time}}</view>
				<view class="row ecllipse">{{item.name}}</view>
				<view class="row">{{item.from}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			list:[{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'QQ'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'微信'},
			{time:'2021-10-11',name:'188****1234',from:'QQ'},
			{time:'2021-10-11',name:'188****1234',from:'微信'}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 32rpx 24rpx;}
.block{background-color: #FFF;border-radius: 16rpx;padding:24rpx;
	.card{padding: 24rpx;
		.code{color: #246FDD;font-size: 64rpx;font-weight: bold;}
		.name{font-size: 28rpx;color: #999;margin-top: 24rpx;}
		.copy{background-color: #246FDD;color: #FFF;font-size: 28rpx;margin-top: 48rpx;border-radius: 16rpx;
			width: 192rpx;height: 64rpx;
		}
	}
	.item{margin: 32rpx 0;
		.row{width: 33.33%;color: #333;font-size: 28rpx;}
	}
}
.invite{height: 88rpx;color: #FFF;background-color: #246FDD;border-radius: 16rpx;margin-top: 48rpx;}
.title{font-weight: bold;font-size: 32rpx;color: #333;margin: 54rpx 0 26rpx;}
</style>
